<template>
  <div class="min-h-screen p-6" style="background-color: #FAF9F5;">
    <!-- 页面头部 -->
    <div class="mb-6">
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <button
            @click="goBack"
            class="mr-4 p-2 text-gray-600 hover:text-gray-900 border border-gray-300 rounded-[0.6rem] hover:border-gray-400 transition-all duration-200 active:scale-[0.985]"
            style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
          >
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
            </svg>
          </button>
          <div>
            <h1 class="text-2xl font-bold text-gray-900">信息提交</h1>
            <p class="mt-1 text-sm text-gray-600">核对个人信息并填写紧急联系人等相关信息</p>
          </div>
        </div>
        <div class="flex items-center gap-3">
          <div class="flex items-center text-sm text-gray-500">
            <ClockIcon class="w-4 h-4 mr-1" />
            最后保存：{{ lastSaveTime || '未保存' }}
          </div>
        </div>
      </div>
    </div>

    <!-- 进度指示器 -->
    <div class="rounded-[0.6rem] border border-gray-200 p-6 mb-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
      <div class="flex items-center justify-between mb-4">
        <h2 class="text-lg font-medium text-gray-900">信息完善进度</h2>
        <span class="text-sm text-gray-500">{{ completionRate }}% 完成</span>
      </div>
      <div class="w-full bg-gray-200 rounded-full h-2">
        <div 
          class="bg-blue-600 h-2 rounded-full transition-all duration-300" 
          :style="{ width: completionRate + '%' }"
        ></div>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mt-4">
        <div class="flex items-center">
          <CheckCircleIcon 
            :class="basicInfoComplete ? 'text-green-500' : 'text-gray-300'"
            class="w-5 h-5 mr-2" 
          />
          <span :class="basicInfoComplete ? 'text-green-700' : 'text-gray-500'" class="text-sm">
            基本信息
          </span>
        </div>
        <div class="flex items-center">
          <CheckCircleIcon 
            :class="contactInfoComplete ? 'text-green-500' : 'text-gray-300'"
            class="w-5 h-5 mr-2" 
          />
          <span :class="contactInfoComplete ? 'text-green-700' : 'text-gray-500'" class="text-sm">
            联系信息
          </span>
        </div>
        <div class="flex items-center">
          <CheckCircleIcon 
            :class="emergencyContactComplete ? 'text-green-500' : 'text-gray-300'"
            class="w-5 h-5 mr-2" 
          />
          <span :class="emergencyContactComplete ? 'text-green-700' : 'text-gray-500'" class="text-sm">
            紧急联系人
          </span>
        </div>
        <div class="flex items-center">
          <CheckCircleIcon 
            :class="additionalInfoComplete ? 'text-green-500' : 'text-gray-300'"
            class="w-5 h-5 mr-2" 
          />
          <span :class="additionalInfoComplete ? 'text-green-700' : 'text-gray-500'" class="text-sm">
            其他信息
          </span>
        </div>
      </div>
    </div>

    <form @submit.prevent="handleSubmit" class="space-y-6">
      <!-- 基本信息 -->
      <div class="rounded-[0.6rem] border border-gray-200 p-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-lg font-medium text-gray-900">基本信息</h2>
          <span class="text-sm text-blue-600">请核对以下信息是否正确</span>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">学号 *</label>
            <input
              v-model="studentInfo.studentId"
              type="text"
              readonly
              class="w-full px-3 py-2 border border-gray-300 rounded-[0.6rem] text-gray-500 cursor-not-allowed"
              style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
            />
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">姓名 *</label>
            <input
              v-model="studentInfo.name"
              type="text"
              required
              class="w-full px-3 py-2 border border-gray-300 rounded-[0.6rem] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
              style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
            />
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">性别 *</label>
            <select
              v-model="studentInfo.gender"
              required
              class="w-full px-3 py-2 border border-gray-300 rounded-[0.6rem] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
              style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
            >
              <option value="">请选择性别</option>
              <option value="男">男</option>
              <option value="女">女</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">出生日期 *</label>
            <input
              v-model="studentInfo.birthDate"
              type="date"
              required
              class="w-full px-3 py-2 border border-gray-300 rounded-[0.6rem] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
              style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
            />
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">身份证号 *</label>
            <input
              v-model="studentInfo.idCard"
              type="text"
              required
              maxlength="18"
              @input="validateIdCard"
              class="w-full px-3 py-2 border border-gray-300 rounded-[0.6rem] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
              style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
              :class="{ 'border-red-300 focus:border-red-500 focus:ring-red-500': idCardError }"
            />
            <p v-if="idCardError" class="mt-1 text-sm text-red-600">{{ idCardError }}</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">民族</label>
            <input
              v-model="studentInfo.ethnicity"
              type="text"
              class="w-full px-3 py-2 border border-gray-300 rounded-[0.6rem] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
              style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
              placeholder="请输入民族"
            />
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">政治面貌</label>
            <select
              v-model="studentInfo.politicalStatus"
              class="w-full px-3 py-2 border border-gray-300 rounded-[0.6rem] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
              style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
            >
              <option value="">请选择政治面貌</option>
              <option value="群众">群众</option>
              <option value="共青团员">共青团员</option>
              <option value="中共党员">中共党员</option>
              <option value="中共预备党员">中共预备党员</option>
              <option value="民主党派">民主党派</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">专业 *</label>
            <input
              v-model="studentInfo.major"
              type="text"
              readonly
              class="w-full px-3 py-2 border border-gray-300 rounded-[0.6rem] text-gray-500 cursor-not-allowed"
              style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
            />
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">班级 *</label>
            <input
              v-model="studentInfo.className"
              type="text"
              readonly
              class="w-full px-3 py-2 border border-gray-300 rounded-[0.6rem] text-gray-500 cursor-not-allowed"
              style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
            />
          </div>
        </div>
      </div>

      <!-- 联系信息 -->
      <div class="rounded-[0.6rem] border border-gray-200 p-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
        <h2 class="text-lg font-medium text-gray-900 mb-4">联系信息</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">手机号码 *</label>
            <input
              v-model="studentInfo.phone"
              type="tel"
              required
              maxlength="11"
              @input="validatePhone"
              class="w-full px-3 py-2 border border-gray-300 rounded-[0.6rem] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
              style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
              :class="{ 'border-red-300 focus:border-red-500 focus:ring-red-500': phoneError }"
              placeholder="请输入11位手机号码"
            />
            <p v-if="phoneError" class="mt-1 text-sm text-red-600">{{ phoneError }}</p>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">电子邮箱 *</label>
            <input
              v-model="studentInfo.email"
              type="email"
              required
              @input="validateEmail"
              class="w-full px-3 py-2 border border-gray-300 rounded-[0.6rem] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
              style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
              :class="{ 'border-red-300 focus:border-red-500 focus:ring-red-500': emailError }"
              placeholder="请输入电子邮箱"
            />
            <p v-if="emailError" class="mt-1 text-sm text-red-600">{{ emailError }}</p>
          </div>
          <div class="md:col-span-2">
            <label class="block text-sm font-medium text-gray-700 mb-2">家庭住址 *</label>
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
              <select
                v-model="studentInfo.province"
                required
                @change="handleProvinceChange"
                class="w-full px-3 py-2 border border-gray-300 rounded-[0.6rem] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
                style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
              >
                <option value="">请选择省份</option>
                <option v-for="province in provinces" :key="province" :value="province">
                  {{ province }}
                </option>
              </select>
              <select
                v-model="studentInfo.city"
                required
                @change="handleCityChange"
                :disabled="!studentInfo.province"
                class="w-full px-3 py-2 border border-gray-300 rounded-[0.6rem] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 disabled:cursor-not-allowed"
                style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
              >
                <option value="">请选择城市</option>
                <option v-for="city in cities" :key="city" :value="city">
                  {{ city }}
                </option>
              </select>
              <select
                v-model="studentInfo.district"
                required
                :disabled="!studentInfo.city"
                class="w-full px-3 py-2 border border-gray-300 rounded-[0.6rem] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 disabled:cursor-not-allowed"
                style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
              >
                <option value="">请选择区县</option>
                <option v-for="district in districts" :key="district" :value="district">
                  {{ district }}
                </option>
              </select>
              <input
                v-model="studentInfo.address"
                type="text"
                required
                class="w-full px-3 py-2 border border-gray-300 rounded-[0.6rem] focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200"
                style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
                placeholder="详细地址"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- 紧急联系人 -->
      <div class="rounded-[0.6rem] border border-gray-200 p-6" style="background-color: #FAF9F5; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);">
        <div class="flex items-center justify-between mb-4">
          <h2 class="text-lg font-medium text-gray-900">紧急联系人</h2>
          <button
            type="button"
            @click="addEmergencyContact"
            class="inline-flex items-center px-3 py-1.5 text-sm font-medium text-blue-600 rounded-[0.6rem] hover:border-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all duration-200 active:scale-[0.985]"
            style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
          >
            <PlusIcon class="w-4 h-4 mr-1" />
            添加联系人
          </button>
        </div>
        
        <div v-if="emergencyContacts.length === 0" class="text-center py-8 text-gray-500">
          <UserGroupIcon class="w-12 h-12 mx-auto mb-2 text-gray-300" />
          <p>暂无紧急联系人，请至少添加一位</p>
        </div>
        
        <div v-else class="space-y-4">
          <div 
            v-for="(contact, index) in emergencyContacts" 
            :key="index"
            class="border border-gray-200 rounded-[0.6rem] p-4"
            style="background-color: #F5F5F0; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.06);"
          >
            <div class="flex items-center justify-between mb-4">
              <h3 class="text-sm font-medium text-gray-900">联系人 {{ index + 1 }}</h3>
              <button
                type="button"
                @click="removeEmergencyContact(index)"
                class="text-red-600 hover:text-red-900 transition-colors"
              >
                <TrashIcon class="w-4 h-4" />
              </button>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">姓名 *</label>
                <input
                  v-model="contact.name"
                  type="text"
                  required
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                  placeholder="请输入姓名"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">关系 *</label>
                <select
                  v-model="contact.relationship"
                  required
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                >
                  <option value="">请选择关系</option>
                  <option value="父亲">父亲</option>
                  <option value="母亲">母亲</option>
                  <option value="配偶">配偶</option>
                  <option value="兄弟">兄弟</option>
                  <option value="姐妹">姐妹</option>
                  <option value="其他亲属">其他亲属</option>
                  <option value="朋友">朋友</option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">手机号码 *</label>
                <input
                  v-model="contact.phone"
                  type="tel"
                  required
                  maxlength="11"
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                  placeholder="请输入手机号码"
                />
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">工作单位</label>
                <input
                  v-model="contact.workplace"
                  type="text"
                  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                  placeholder="请输入工作单位"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 其他信息 -->
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <h2 class="text-lg font-medium text-gray-900 mb-4">其他信息</h2>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">特长爱好</label>
            <textarea
              v-model="studentInfo.hobbies"
              rows="3"
              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
              placeholder="请描述您的特长爱好"
            ></textarea>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">健康状况</label>
            <textarea
              v-model="studentInfo.healthStatus"
              rows="3"
              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
              placeholder="请描述您的健康状况，如有特殊情况请详细说明"
            ></textarea>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">家庭经济状况</label>
            <select
              v-model="studentInfo.economicStatus"
              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
            >
              <option value="">请选择家庭经济状况</option>
              <option value="富裕">富裕</option>
              <option value="一般">一般</option>
              <option value="困难">困难</option>
              <option value="特别困难">特别困难</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-2">是否申请助学贷款</label>
            <div class="flex items-center gap-4 mt-2">
              <label class="flex items-center">
                <input
                  v-model="studentInfo.needLoan"
                  type="radio"
                  :value="true"
                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300"
                />
                <span class="ml-2 text-sm text-gray-700">是</span>
              </label>
              <label class="flex items-center">
                <input
                  v-model="studentInfo.needLoan"
                  type="radio"
                  :value="false"
                  class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300"
                />
                <span class="ml-2 text-sm text-gray-700">否</span>
              </label>
            </div>
          </div>
        </div>
        
        <div class="mt-6">
          <label class="block text-sm font-medium text-gray-700 mb-2">备注信息</label>
          <textarea
            v-model="studentInfo.remarks"
            rows="4"
            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
            placeholder="其他需要说明的信息"
          ></textarea>
        </div>
      </div>

      <!-- 提交按钮 -->
      <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
        <div class="flex items-center justify-between">
          <div class="flex items-center gap-4">
            <button
              type="button"
              @click="handleSaveDraft"
              class="px-6 py-2 text-sm font-medium text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors"
            >
              <DocumentIcon class="w-4 h-4 mr-2 inline" />
              保存草稿
            </button>
            <span class="text-sm text-gray-500">信息将自动保存</span>
          </div>
          <div class="flex items-center gap-3">
            <div class="text-sm text-gray-500">
              完成度：{{ completionRate }}%
            </div>
            <button
              type="submit"
              :disabled="!canSubmit"
              class="px-6 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
            >
              <CheckCircleIcon class="w-4 h-4 mr-2 inline" />
              提交信息
            </button>
          </div>
        </div>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '../../stores/app'
import {
  PlusIcon,
  TrashIcon,
  ClockIcon,
  CheckCircleIcon,
  UserGroupIcon,
  DocumentIcon
} from '@heroicons/vue/24/outline'

// 使用stores和router
const appStore = useAppStore()
const router = useRouter()

// 响应式数据
const studentInfo = ref({
  studentId: '2024001',
  name: '张三',
  gender: '',
  birthDate: '',
  idCard: '',
  ethnicity: '',
  politicalStatus: '',
  major: '计算机科学与技术',
  className: '计算机2024-1班',
  phone: '',
  email: '',
  province: '',
  city: '',
  district: '',
  address: '',
  hobbies: '',
  healthStatus: '',
  economicStatus: '',
  needLoan: null,
  remarks: ''
})

const emergencyContacts = ref([])
const lastSaveTime = ref('')
const idCardError = ref('')
const phoneError = ref('')
const emailError = ref('')

// 地区数据（简化版）
const provinces = ref([
  '北京市', '上海市', '天津市', '重庆市',
  '河北省', '山西省', '辽宁省', '吉林省', '黑龙江省',
  '江苏省', '浙江省', '安徽省', '福建省', '江西省', '山东省',
  '河南省', '湖北省', '湖南省', '广东省', '海南省',
  '四川省', '贵州省', '云南省', '陕西省', '甘肃省', '青海省',
  '内蒙古自治区', '广西壮族自治区', '西藏自治区', '宁夏回族自治区', '新疆维吾尔自治区'
])

const cities = ref([])
const districts = ref([])

// 计算属性
const basicInfoComplete = computed(() => {
  return !!(studentInfo.value.name && 
           studentInfo.value.gender && 
           studentInfo.value.birthDate && 
           studentInfo.value.idCard && 
           !idCardError.value)
})

const contactInfoComplete = computed(() => {
  return !!(studentInfo.value.phone && 
           studentInfo.value.email && 
           studentInfo.value.province && 
           studentInfo.value.city && 
           studentInfo.value.district && 
           studentInfo.value.address &&
           !phoneError.value && 
           !emailError.value)
})

const emergencyContactComplete = computed(() => {
  return emergencyContacts.value.length > 0 && 
         emergencyContacts.value.every(contact => 
           contact.name && contact.relationship && contact.phone
         )
})

const additionalInfoComplete = computed(() => {
  return studentInfo.value.needLoan !== null
})

const completionRate = computed(() => {
  let completed = 0
  if (basicInfoComplete.value) completed += 25
  if (contactInfoComplete.value) completed += 25
  if (emergencyContactComplete.value) completed += 25
  if (additionalInfoComplete.value) completed += 25
  return completed
})

const canSubmit = computed(() => {
  return basicInfoComplete.value && 
         contactInfoComplete.value && 
         emergencyContactComplete.value
})

// 方法
const validateIdCard = () => {
  const idCard = studentInfo.value.idCard
  if (!idCard) {
    idCardError.value = ''
    return
  }
  
  if (!/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test(idCard)) {
    idCardError.value = '身份证号格式不正确'
  } else {
    idCardError.value = ''
  }
}

const validatePhone = () => {
  const phone = studentInfo.value.phone
  if (!phone) {
    phoneError.value = ''
    return
  }
  
  if (!/^1[3-9]\d{9}$/.test(phone)) {
    phoneError.value = '手机号格式不正确'
  } else {
    phoneError.value = ''
  }
}

const validateEmail = () => {
  const email = studentInfo.value.email
  if (!email) {
    emailError.value = ''
    return
  }
  
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    emailError.value = '邮箱格式不正确'
  } else {
    emailError.value = ''
  }
}

const handleProvinceChange = () => {
  studentInfo.value.city = ''
  studentInfo.value.district = ''
  
  // 模拟城市数据
  const cityMap = {
    '浙江省': ['杭州市', '宁波市', '温州市', '嘉兴市', '湖州市', '绍兴市', '金华市', '衢州市', '舟山市', '台州市', '丽水市'],
    '江苏省': ['南京市', '无锡市', '徐州市', '常州市', '苏州市', '南通市', '连云港市', '淮安市', '盐城市', '扬州市', '镇江市', '泰州市', '宿迁市'],
    '广东省': ['广州市', '深圳市', '珠海市', '汕头市', '佛山市', '韶关市', '湛江市', '肇庆市', '江门市', '茂名市', '惠州市', '梅州市', '汕尾市', '河源市', '阳江市', '清远市', '东莞市', '中山市', '潮州市', '揭阳市', '云浮市']
  }
  
  cities.value = cityMap[studentInfo.value.province] || []
}

const handleCityChange = () => {
  studentInfo.value.district = ''
  
  // 模拟区县数据
  const districtMap = {
    '杭州市': ['上城区', '下城区', '江干区', '拱墅区', '西湖区', '滨江区', '萧山区', '余杭区', '富阳区', '临安区'],
    '宁波市': ['海曙区', '江北区', '北仑区', '镇海区', '鄞州区', '奉化区', '余姚市', '慈溪市', '宁海县', '象山县'],
    '温州市': ['鹿城区', '龙湾区', '瓯海区', '洞头区', '永嘉县', '平阳县', '苍南县', '文成县', '泰顺县', '瑞安市', '乐清市']
  }
  
  districts.value = districtMap[studentInfo.value.city] || []
}

const addEmergencyContact = () => {
  emergencyContacts.value.push({
    name: '',
    relationship: '',
    phone: '',
    workplace: ''
  })
}

const removeEmergencyContact = (index) => {
  emergencyContacts.value.splice(index, 1)
}

const handleSaveDraft = async () => {
  try {
    // 模拟保存草稿
    await new Promise(resolve => setTimeout(resolve, 500))
    lastSaveTime.value = new Date().toLocaleString('zh-CN')
    appStore.showNotification('草稿保存成功', 'success')
  } catch (error) {
    appStore.showNotification('保存失败，请重试', 'error')
  }
}

const handleSubmit = async () => {
  if (!canSubmit.value) {
    appStore.showNotification('请完善必填信息', 'warning')
    return
  }
  
  try {
    // 模拟提交
    await new Promise(resolve => setTimeout(resolve, 1000))
    
    const submitData = {
      ...studentInfo.value,
      emergencyContacts: emergencyContacts.value
    }
    
    console.log('提交数据:', submitData)
    
    appStore.showNotification('信息提交成功', 'success')
    
    // 可以跳转到下一步或其他页面
    // router.push('/student/payment')
  } catch (error) {
    appStore.showNotification('提交失败，请重试', 'error')
  }
}

// 返回首页
const goBack = () => {
  router.push('/student/home')
}

// 自动保存功能
watch(
  [studentInfo, emergencyContacts],
  () => {
    // 防抖保存
    clearTimeout(window.autoSaveTimer)
    window.autoSaveTimer = setTimeout(() => {
      handleSaveDraft()
    }, 30000) // 30秒后自动保存
  },
  { deep: true }
)

// 生命周期
onMounted(() => {
  // 初始化数据
  // 可以从后端获取学生基本信息
  
  // 添加一个默认的紧急联系人
  if (emergencyContacts.value.length === 0) {
    addEmergencyContact()
  }
})
</script>